<template>
  <div class="boomWriteOrder">
    <div class="write">
      <div class="write_main">
        <div class="write_title">
          <div class="flex">
            <img
              src="https://image.hezongyy.com/pcimage/bird/dingwei.png"
              alt
            />
            <div class="title_rig">
              <div class="title_name">
                <span class="name">{{ address.consignee }}</span>
                <span class="tel">{{ address.mobile }}</span>
              </div>
              <span class="date"
                >{{ this.address.province }} {{ this.address.city }}
                {{ this.address.district }} {{ this.address.address }}</span
              >
            </div>
          </div>
          <div class="title_left" @click="toChange">修改</div>
        </div>
        <img class="Imgs" src="../../assets/image/bottom_shod.png" alt />
      </div>
      <div class="write_item">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1" :content="tableData">
            <template #title>
              <div
                class="titles"
                style="
                  height: 1.26rem;
                  line-height: 1.26rem;
                  display: flex;
                  align-items: center;
                "
              >
                <span style="color: #222222; font-size: 14px">礼品信息</span>
                <van-icon name="收起" />
              </div>
            </template>
            <div class="goods_item" v-if="!this.$route.query.orderId">
              <div class="goods_items">
                <img :src="address.pictrue" alt />
                <div class="goods_center">
                  <span class="name">{{ address.goodsName }}</span>
                  <div class="goods_bottom">
                    <span>
                      <img src="../../assets/image/moliy.png" alt />
                      {{ address.point }}
                    </span>
                    <span class="iiii">X {{ address.quantity }}</span>
                  </div>
                  <div class="name">
                    <p class="sku">{{ address.skuName }}</p>
                  </div>
                </div>
              </div>
            </div>
              <div class="goods_item" v-if="this.$route.query.orderId">
              <div class="goods_items">
                <img :src="address.pictrue" alt />
                <div class="goods_center">
                  <span class="name">{{ address.goodsName }}</span>
                  <div class="goods_bottom">
                    <!-- <span>
                      <img src="../../assets/image/moliy.png" alt />
                      {{ address.point }}
                    </span> -->
                    <span class="iiii">X {{ address.quantity }}</span>
                  </div>
                  <div class="name">
                    <p class="sku">{{ address.skuName }}</p>
                  </div>
                </div>
              </div>
            </div>

          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="footers">
        <div class="jifen" v-if="!this.$route.query.orderId">
          <div class="jifen_center">
            <span class="lipin">精品积分</span>
            <span class="li">
              <img src="../../assets/image/moliy.png" alt />
              <p>{{ address.totalPoints }}</p>
            </span>
          </div>
        </div>
        <div class="mmm">
          <img src="../../assets/img/poin_ti.png" alt="" />
          兑换的礼品不允许退货，非质量问题不允许换货
        </div>
        <div class="footer" v-if="!this.$route.query.orderId">
          <div class="kon"></div>
          <div class="aa">精品积分合计:<i>{{ address.totalPoints }}</i></div>
          <div class="ti" @click="toPayOrder()">提交申请</div>
        </div>
        <div class="footer"  v-if="this.$route.query.orderId">
          <div class="ti_" @click="toPayOrders_()">提交订单</div>
        </div>
      </div>
      <van-popup v-model="show" round>
        <div class="popTitle">修改收货信息</div>
        <div class="popUse">
          <p>收货人</p>
          <input type="text" placeholder="请输入收货人姓名" v-model="name" />
        </div>
        <div class="popUse">
          <p>联系电话</p>
          <input
            type="text"
            placeholder="请输入收货人的联系电话"
            v-model="phone"
          />
        </div>
        <div class="popUse">
          <p>收货地址</p>
          <div class="selectArea">
            <div :class="{ area1: true }" @click="toShow()" v-if="!isSelect">
              请选择地区
            </div>
            <div :class="{ area1: true, area2: true }" v-if="isSelect">
              {{ provinceName }} {{ cityName }} {{ areaName }}
            </div>
            <div class="img" @click="toShow()"></div>
            <van-picker
              v-show="addressFlag"
              show-toolbar
              title="地址选择"
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
            />
            <textarea
              v-model="details"
              placeholder="请输入详细地址"
              class="details"
            ></textarea>
          </div>
        </div>
        <div class="bottom">
          <div class="leftClose" @click="toClose()">取消</div>
          <div class="rightSave" @click="toSave()">保存</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import url from "../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      activeNames: ["1"],
      address: {}, //返回的所有数据
      tableData: [],
      api: JSON.parse(sessionStorage.getItem("ponitOrder")),
      btn: true,
      notedata: "", //备注
      skuName: "", //规格s
      show: false,
      columns: [],
      province: "", //省id
      city: "", //市id
      area: "", //区id
      provinceName: "", //省
      cityName: "", //市
      areaName: "", //区
      details: "", //详细地址
      phone: "", //编辑后的电话号码
      name: "", //编辑后的收货人
      addressFlag: false, //控制所有区域框
      isSelect: false, //是否选择省市区
    };
  },
  created() {
    // this.toPayOrder()
    postRequest(url.birdWriteOrder, this.api).then((res) => {
      this.address = res.data.content;
      this.tableData = res.data.content.pointGoods;
      this.province = this.address.province;
      this.city = this.address.city;
      this.area = this.address.district;
      this.details = this.address.address;
      this.name = this.address.consignee;
      this.phone = this.address.mobile;
      this.details = this.address.address;
    });
    getRequest(url.getDistrict).then((res) => {
      if (res.data.code == "000000") {
        this.columns = res.data.content;
        this.columns.map((obj, index) => {
          // 获取市
          obj.children.map((item) => {
            if (item.level == 2) {
              if (item.children.length == 0) {
                item.children.push({
                  id: "",
                  text: "",
                });
              }
            }
            // 获取区
            if (item.children.length != 0) {
              item.children.map((pop) => {
                if (pop.level == 3) {
                  if (pop.children.length == 0) {
                    pop.children.push({
                      id: "",
                      text: "",
                    });
                  }
                }
              });
            }
          });
        });
        this.columns = JSON.parse(
          JSON.stringify(this.columns).replace(/name/g, "text")
        );
      }
    });
  },
  methods: {
    toPayOrder() {
      var apiFunc = {
        type: 1,
        channel: 2,
        param: {
          goodsId: this.address.goodsId,
          quantity: this.address.quantity,
          skuId: this.address.goodsId,
          remark: this.address.remark,
          skuName: this.address.goodsName,
        },
        province: this.province,
        city: this.city,
        district: this.area,
        address: this.details,
        consignee: this.name,                                                                                                                                                                                                                                                                    
        mobile: this.phone,
      };
      if (this.address.skuSpecList) {
        if (this.address.skuSpecList.length != 0) {
          apiFunc.param.skuId = this.address.skuId;
          apiFunc.param.skuName = this.address.skuName;
        }
      }
      postRequest(url.birdPointOrder, apiFunc).then((res) => {
        if (res.data.content) {
          sessionStorage.setItem(
            "totalPoint",
            JSON.stringify(this.address.totalPoints)
          );
          // this.$router.push("/successOrder");
          // this.$router.push({ path: "./succeChange", query: { type: 1 } });
           let routeData = this.$router.resolve({
              path: "/succeChange",
              query: { type: 1,},
            });
          window.open(routeData.href,"_self")
        } else {
          this.$notify({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },

    toPayOrders_(){
      var apiFunc = {
        type: 1,
        channel: 1,
        param: {
          goodsId: this.address.goodsId,
          quantity: this.address.quantity,
          skuId: this.address.goodsId,
          remark: this.address.remark,
          skuName: this.address.goodsName,
        },
        province: this.province,
        city: this.city,
        district: this.area,
        address: this.details,
        consignee: this.name,                                                                                                                                                                                                                                                                    
        mobile: this.phone,
        orderId:this.$route.query.orderId  //其它页面的订单id
      };
      if (this.address.skuSpecList) {
        if (this.address.skuSpecList.length != 0) {
          apiFunc.param.skuId = this.address.skuId;
          apiFunc.param.skuName = this.address.skuName;
        }
      }
      postRequest(url.birdPointOrders, apiFunc).then((res) => {
        if (res.data.content) {
          sessionStorage.setItem( "totalPoint",JSON.stringify(this.address.totalPoints)
          );
          let routeData = this.$router.resolve({
              path: "/succeChange",
              query: { type: 1,},
            });
          window.open(routeData.href,"_self")
          
        } else {
          this.$notify({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    // 点击修改
    toChange() {
      this.show = true;
      this.provinceName = "";
      this.cityName = "";
      this.areaName = "";
    },
    // 点击展开省市区
    toShow() {
      this.addressFlag = true;
    },
    //点击确认
    onConfirm(picker) {
      this.provinceName = picker[0];
      this.cityName = picker[1];
      this.areaName = picker[2];
      this.province = this.provinceName;
      this.city = this.cityName;
      this.area = this.areaName;
      this.isSelect = true;
      this.addressFlag = false;
    },
    // 点击取消
    onCancel(picker) {
      this.isSelect = false;
      this.addressFlag = false;
    },
    // 整个弹框取消
    toClose() {
      this.show = false;
    },
    // 整个弹框保存
    toSave() {
      if (this.details && this.phone && this.name && this.provinceName) {
        let reg = /^[0-9]{1,20}$/;
        if (reg.test(this.phone)) {
          this.show = false;
          this.address.province = this.provinceName;
          this.address.city = this.cityName;
          this.address.district = this.areaName;
          this.address.address = this.details;
          this.address.consignee = this.name;
          this.address.mobile = this.phone;
        } else {
          this.$toast("请填写正确的联系方式");
        }
      } else {
        this.$toast("请填写完整的收货信息");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.boomWriteOrder {
  width: 100vw;
  height: 100vh;
  background: #eeeeee;
  .write {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    .van-cell--clickable {
      display: flex;
      align-items: center;
    }
    .van-cell__right-icon {
      margin-top: 0.42rem;
    }
    .write_main {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      background: #ffffff;
      .write_title {
        display: flex;
        align-items: center;
        height: 1.28rem;
        justify-content: space-between;
        .flex {
          display: flex;
          align-items: center;
          margin-left: 23px;
          img {
            width: 0.46rem;
            height: 0.46rem;
          }
          .title_rig {
            padding: 0.26rem;
            height: 1.2rem;
            // line-height: 0.6rem;
            .title_name {
              line-height: 0.62rem;
              font-size: 0.3rem;
              color: #222222;
              // line-height: 0.3rem;
              font-weight: bold;
              .name {
                //   margin-right: 0.3rem;
              }
            }
            .date {
              color: #222222;
              font-size: 0.3rem;
            }
          }
        }
        .title_left {
          margin-right: 33px;
          width: 109px;
          height: 48px;
          border: 1px solid #3dbb2b;
          border-radius: 10px;
          font-size: 26px;
          color: #3dbb2b;
          text-align: center;
          line-height: 48px;
        }
      }
      .Imgs {
        height: 0.03rem;
        width: 100%;
      }
    }
    .write_item {
      width: 100%;
      position: relative;
      top: 1.6rem;
      overflow: hidden;
      border-top: 0.6rem solid #efefef;
      .titles {
        align-items: center;
      }
      .goods_item {
        height: 2.2rem;
        .goods_items {
          display: flex;
          justify-content: center;
          padding: 0.2rem;
          img {
            width: 1.6rem;
            height: 1.6rem;
          }
          .goods_center {
            width: 6.6rem;
            padding-left: 0.3rem;
            .name {
              font-size: 0.32rem;
              color: #343434;
              font-weight: bold;
            }
            .goods_bottom {
              bottom: 0;
              color: #1eb808;
              display: flex;
              justify-content: space-between;
              span {
                color: #1eb808;
                img {
                  width: 0.3rem;
                  height: 0.3rem;
                }
              }
              .iiii {
                color: #222222;
              }
            }
            .name {
              color: #000;
              font-size: 14px;
              font-weight: bold;
              line-height: 34px;
              margin-top: 0.2rem;
            }
          }
        }
      }
    }

    .footers {
      width: 100%;
      background: #efefef;
      position: fixed;
      bottom: 0;
      right: 0;
      // border-top: 0.6rem solid #efefef;
      z-index: 666;
      .jifen {
        width: 100%;
        height: 1rem;
        background: #ffffff;
        border-bottom: 0.6rem solid #eeeeee;
        z-index: 666;
        border: 0.02rem solid #efefef;
        .jifen_center {
          display: flex;
          justify-content: space-between;
          line-height: 1rem;
          padding-left: 0.2rem;
          padding-right: 0.2rem;
          .lipin {
            color: #222222;
            font-size: 26px;
          }
          .li {
            width: 2rem;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 0.46rem;
              height: 0.46rem;
              padding-right: 0.22rem;
            }
            p {
              color: #1eb808;
              font-size: 26px;
              font-weight: bold;
            }
          }
        }
      }
      .mmm {
        height: 1rem;
        line-height: 1rem;
        color: #ee746c;
        padding-left: 0.13rem;
        img {
          width: 0.28rem;
          height: 0.28rem;
        }
      }
    }
    .footer {
      width: 100%;
      height: 110px;
      line-height: 110px;
      opacity: 1;
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      background: #ffffff;
      border: 0.02rem solid #efefef;
      align-items: center;
      .aa {
        font-size: 26px;
        color: #FD333C;
        font-weight: bold;
        i{
          font-size: 32px;
        }
      }
      .ti {
        width: 220px;
        height: 80px;
        line-height: 80px;
        opacity: 1;
        background: #1db807;
        border-radius: 40px;
        text-align: center;
        align-items: center;
        font-size: 28px;
        color: #FFFFFF;
      }
      .ti_{
        width: 686px;
        height: 92px;
        line-height: 92px;
        opacity: 1;
        background: #1db807;
        border-radius: 40px;
        text-align: center;
        align-items: center;
        font-size: 28px;
        color: #FFFFFF;
      }
    }
    .van-popup {
      width: 600px;
      height: 969px;
      padding: 0 40px;
      .popTitle {
        height: 68px;
        font-size: 32px;
        font-weight: bold;
        color: #333333;
        text-align: center;
        line-height: 68px;
      }
      .popUse {
        p {
          font-size: 24px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 19px;
        }
        input {
          width: 600px;
          height: 88px;
          background: #f7f7f7;
          border-radius: 10px;
          border: none;
          text-indent: 10px;
          margin-bottom: 22px;
        }
        .selectArea {
          position: relative;
          .area1 {
            width: 600px;
            height: 88px;
            background: #f7f7f7;
            border-radius: 10px;
            font-size: 28px;
            font-weight: 500;
            color: #999999;
            line-height: 88px;
            text-indent: 10px;
          }
          .area2 {
            color: #333;
          }
          .img {
            position: absolute;
            right: 10px;
            top: 30px;
            width: 26px;
            height: 26px;
            background: url("https://image.hezongyy.com/pcimage/bird/jiantou.png")
              no-repeat center;
            background-size: 100% 100%;
          }
          .details {
            margin-top: 14px;
            text-indent: 10px;
            width: 600px;
            height: 200px;
            padding: 6px;
            background: #f7f7f7;
            border-radius: 10px;
            border: none;
            font-size: 28px;
            font-weight: 500;
            line-height: 32px;
            color: #2e2e2e;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin: 36px 0 26px;
        .leftClose {
          width: 220px;
          height: 78px;
          background: #dcdcdc;
          border-radius: 10px;
          color: #666666;
          font-size: 28px;
          font-weight: 500;
          text-align: center;
          line-height: 78px;
        }
        .rightSave {
          text-align: center;
          line-height: 78px;
          width: 350px;
          height: 78px;
          background: #3dbb2b;
          border-radius: 10px;
          font-size: 28px;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .van-picker {
        .van-picker__toolbar {
          height: 0px;
          display: none;
        }
      }
    }
  }
}
</style>